import { useEffect, useState } from 'react';
import { Button, Space, Table, } from 'antd';
import type { TableProps } from 'antd';
import axios from '../../api/request';

function Liste() {
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const [data,setData]=useState([])
  const listData=async()=>{
    const res=await axios.get('/article/list')
    setData(res.data.rows)
  }
  useEffect(()=>{
    listData()
  },[])

  const columns: TableProps<DataType>['columns'] = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '列表',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '文章内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: '按钮',
      key: 'action',
      render: (_,) => (
        <Space size="middle">
          <Button>增加</Button>
          <Button>删除</Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Table<DataType> columns={columns} dataSource={data} />
    </div>
  );
}

export default Liste;
